/**
 * personal list
 * Created by li-rz on 16-12-7.
 */

import './PersonalList.scss';

import React from 'react';

class PersonalList extends React.Component {
    constructor(props) {
        super(props);
        this.list_data = [
            {
                title: '主页',
                icon_class : "fa fa-home"
            },
            {
                title: '课程',
                icon_class : "fa fa-book"
            },
            {
                title: '评论',
                icon_class : "fa fa-comment"
            },
            {
                title: '笔记',
                icon_class : "fa fa-briefcase"
            },
            {
                title: '收藏',
                icon_class : "fa fa-heart"
            },
            {
                title: '设置',
                icon_class : "fa fa-gear"
            }];

        this.state = {
            chosen: this.props.chosen
        }
    }

    componentDidMount() {
        this._chooseActive(1, true)

        // fix when scroll under tab
        var ulList = document.getElementById("mooc-list-wr")

        window.document.addEventListener("scroll",function (e){
            var sTop = document.body.scrollTop + document.documentElement.scrollTop
            if(sTop >= 409 && ! ulList.className.match(/fixed/gi)){
                ulList.className += " fixed"
            }else if(sTop < 409){
                if(ulList.className.match(/fixed/gi)){
                    ulList.className = ulList.className.replace(/fixed/gi,"").trim()
                }
            }
        })
    }

    /**
     *
     * @param key
     * @return {Function}
     */
    chooseActive(key) {
        let self = this;
        let self_key = key;
        /**
         * event {Event}
         */
        return function (event) {
            event.preventDefault();
            self._chooseActive(self_key);
        }
    }

    /**
     *
     * @param self_key
     * @param if_mount
     * @private
     */
    _chooseActive(self_key, if_mount) {
        if (self_key === this.state.chosen && !if_mount) {
            return;
        }
        this.setState({
            chosen: self_key
        }, function () {
            this.props.emit({
                chosen: this.state.chosen
            })
        });
    }

    /**
     *
     * @param key
     * @param chosen
     * @param className
     */
    generateListProperty (key, chosen, className){
        return {
            key: key,
            className: className + (key === chosen ? ' active' : ' non-active'),
            onClick: this.chooseActive(key).bind(this)
        }
    }


    render() {
        let self = this;
        return (<div className="mooc-list">
            <div id="fixed_dom"></div>
            <ul className="mooc-list-wr" id="mooc-list-wr">
                {
                this.list_data.map(function (obj, key) {
                    return React.createElement('li',
                        self.generateListProperty(key, self.state.chosen, 'mooc-item'),
                        React.createElement('i',
                            {className: obj.icon_class + " mooc-item-icon"}
                        ),
                        obj.title,
                        React.createElement('i', {
                            className: 'fa fa-angle-right mooc-angle-right'}
                        )
                    )
                })
            }
        </ul>
        </div>)
    }
}

PersonalList.PropTypes = {
    emit: React.PropTypes.func,
    chosen: React.PropTypes.number
};

PersonalList.defaultProps = {
    chosen: 0
};

PersonalList.displayName = 'PersonalList';

export default PersonalList;